<template>
	<div>
		<el-tabs v-model="activeName" @tab-click="handleClick" style="margin: 0 10px;">
			<el-tab-pane label="抖音平台" name="dy">
				<div class="statistical">
					<el-row style="margin-bottom: 16px;">
						<el-col :span="24">
							<el-button v-if="get_rules('抖音 添加记录')" type="primary" size="small" icon="el-icon-plus" @click="editHandle()">添加记录
							</el-button>
						</el-col>
					</el-row>
					<el-card style="margin-bottom: 16px;">
						<div class="statistical-top flex-row aic text-center">
							<div class="item flex-column jc-space-between">
								<div class="number">{{data_statistics.article}}</div>
								<div class="name">视频总数</div>
							</div>
							<div class="item flex-column jc-space-between">
								<div class="number">{{data_statistics.browse}}</div>
								<div class="name">播放总数</div>
							</div>
							<div class="item flex-column jc-space-between">
								<div class="number">{{data_statistics.fabulous}}</div>
								<div class="name">点赞总数</div>
							</div>
							<div class="item flex-column jc-space-between">
								<div class="number">{{data_statistics.share}}</div>
								<div class="name">评论总数</div>
							</div>
							<div class="item flex-column jc-space-between">
								<div class="number">{{data_statistics.comment}}</div>
								<div class="name">分享总数</div>
							</div>
						</div>
					</el-card>

					<el-card>
						<div class="search-box flex-row">
							<div class="item time" :class="{'active':from.time === ''}" @click="from.time=''">全部</div>
							<div class="item time" :class="{'active':from.time === 1}" @click="from.time=1">昨天</div>
							<div class="item time" :class="{'active':from.time === 7}" @click="from.time=7">最近7天</div>
							<div class="item time" :class="{'active':from.time === 14}" @click="from.time=14">最近14天</div>
							<div class="item time" :class="{'active':from.time === 30}" @click="from.time=30">最近30天</div>
							<!-- <div class="item">
								<el-date-picker v-model="value1" type="daterange" range-separator="至"
									start-placeholder="开始日期" end-placeholder="结束日期" size="small" style="width: 300px;">
								</el-date-picker>
							</div>
							 -->
							<div class="item">
								<el-select v-model="from.release_status" placeholder="发布状态" size="small">
									<el-option v-for="item in accountlist" :key="item.value" :label="item.label"
										:value="item.value">
									</el-option>
								</el-select>
							</div>
													
							<div class="item">
								<el-input autocomplete="off" placeholder="请输入关键词" size="small" v-model="from.title">
								</el-input>
							</div>
							<div class="item">
								<el-button type="primary" size="small" @click="search">搜索</el-button>
							</div>
							<div class="item">
								<el-button type="warning" size="small" @click="excels()">导出</el-button>
							</div>
						</div>

						<table class="table table-bordered custom-table">
							<tr>
								<th class="text-left">序号</th>
								<th class="text-left">账号</th>
								<th class="text-left">平台</th>
								<th class="text-left">封面</th>
								<!-- <th class="text-left">浏览量</th> -->
								<th class="text-left">标题</th>
								<th class="text-left">发布时间</th>
								<th class="text-left">状态</th>
								<th class="text-left">操作</th>
							</tr>
							<tr v-for="(item,index) in data_list">
								<td style="width: 50px;">{{index + 1}}</td>
								<td style="width: 150px;">{{item.customer_name}}</td>
								<td style="width: 60px;">
									<!-- <el-avatar  :size="100" :fit="fit" shape="square" :src="require('../../assets/images/a_'+item.publishing_platform+'.jpg')">
									</el-avatar> -->
									 <el-image :src="require('../../assets/images/a_'+item.publishing_platform+'.jpg')"></el-image>
								</td>
								<td style="width: 60px;">
									<!-- <el-image :src="'https://pm.ab0769.com/'+item.cover_img"></el-image> -->
									<el-image v-if="is_vido(item.cover_img)=='img'" style="width: 60px;height: 50px;" :src="get_url(item.cover_img)"></el-image>
									<video v-if="is_vido(item.cover_img)=='viod'" :src="get_url(item.cover_img)" controls="controls" width="50" height="50" :data-node="get_url(item.cover_img)"></video>
									
								</td>
								<!-- <td>
									{{item.views_number}}
								</td> -->
								<td>
									{{item.title}}
									<br />
									推荐：播放:{{item.views_number}} 评论:{{item.reply_number}} 分享:{{item.share_number}} 点赞:{{item.likes_number}}
								</td>
								<td style="width: 150px;">{{item.release_time}}</td>
								<td style="width: 100px;">
									
									<span v-if="item.release_status==1">
										已发布
									</span> 
									<span v-else>
										未发布
									</span>
								</td>
								<td style="width: 160px;">
									<el-button v-if="get_rules('抖音 编辑记录')" type="primary" size="mini" @click="editHandle(item.id)">编辑</el-button>
									<el-button v-if="get_rules('抖音 删除记录')" type="danger" size="mini"  @click="delHandle(item.id)">删除</el-button>
								</td>
							</tr>
						</table>

						<!-- 分页 -->
						<div class="custom-pagination">
							<el-pagination background layout="prev, pager, next,sizes" :total="total"
								@current-change="pageChange" @size-change="handleSizeChange" :page-size="pagesize"
								:page-sizes="[10, 20, 50, 100]">
							</el-pagination>
						</div>
					</el-card>
				</div>
			</el-tab-pane>
			<el-tab-pane label="头条平台" name="tt">
				<div class="statistical">
					<el-row style="margin-bottom: 16px;">
						<el-col :span="24">
							<el-button v-if="get_rules('头条 添加记录')" type="primary" size="small" icon="el-icon-plus" @click="editHandle()">添加记录
							</el-button>
						</el-col>
					</el-row>
					<el-card style="margin-bottom: 16px;">
						<div class="statistical-top flex-row aic text-center">
							<div class="item flex-column jc-space-between">
								<div class="number">{{data_statistics.article}}</div>
								<div class="name">视频总数</div>
							</div>
							<div class="item flex-column jc-space-between">
								<div class="number">{{data_statistics.browse}}</div>
								<div class="name">播放总数</div>
							</div>
							<div class="item flex-column jc-space-between">
								<div class="number">{{data_statistics.fabulous}}</div>
								<div class="name">点赞总数</div>
							</div>
							<div class="item flex-column jc-space-between">
								<div class="number">{{data_statistics.share}}</div>
								<div class="name">评论总数</div>
							</div>
							<div class="item flex-column jc-space-between">
								<div class="number">{{data_statistics.comment}}</div>
								<div class="name">分享总数</div>
							</div>
						</div>
					</el-card>

					<el-card>
						<div class="search-box flex-row">
							<div class="item time" :class="{'active':from.time === ''}" @click="from.time=''">全部</div>	
							<div class="item time" :class="{'active':from.time === 1}" @click="from.time=1">昨天</div>
							<div class="item time" :class="{'active':from.time === 7}" @click="from.time=7">最近7天</div>
							<div class="item time" :class="{'active':from.time === 14}" @click="from.time=14">最近14天</div>
							<div class="item time" :class="{'active':from.time === 30}" @click="from.time=30">最近30天</div>
							<!-- <div class="item">
								<el-date-picker v-model="value1" type="daterange" range-separator="至"
									start-placeholder="开始日期" end-placeholder="结束日期" size="small" style="width: 300px;">
								</el-date-picker>
							</div>
							 -->
							<div class="item">
								<el-select v-model="from.release_status" placeholder="发布状态" size="small">
									<el-option v-for="item in accountlist" :key="item.value" :label="item.label"
										:value="item.value">
									</el-option>
								</el-select>
							</div>
						
							<div class="item">
								<el-input autocomplete="off" placeholder="请输入关键词" size="small" v-model="from.title">
								</el-input>
							</div>
							<div class="item">
								<el-button type="primary" size="small" @click="search">搜索</el-button>
							</div>
							<div class="item">
								<el-button type="warning" size="small" @click="excels()">导出</el-button>
							</div>
						</div>

						<table class="table table-bordered custom-table">
							<tr>
								<th class="text-left">序号</th>
								<th class="text-left">账号</th>
								<th class="text-left">平台</th>
								<th class="text-left">封面</th>
							<!-- 	<th class="text-left">浏览量</th> -->
								<th class="text-left">标题</th>
								<th class="text-left">发布时间</th>
								<th class="text-left">状态</th>
								<th class="text-left">操作</th>
							</tr>
							<tr v-for="(item,index) in data_list">
								<td style="width: 50px;">{{index + 1}}</td>
								<td style="width: 150px;">{{item.customer_name}}</td>
								<td style="width: 60px;">
									<!-- <el-avatar  :size="100" :fit="fit" shape="square" :src="require('../../assets/images/a_'+item.publishing_platform+'.jpg')">
									</el-avatar> -->
									 <el-image :src="require('../../assets/images/a_'+item.publishing_platform+'.jpg')"></el-image>
								</td>
								<td style="width: 60px;">
									 <el-image v-if="is_vido(item.cover_img)=='img'" :src="get_url(item.cover_img)"></el-image>
									<video v-if="is_vido(item.cover_img)=='viod'" :src="get_url(item.cover_img)" controls="controls" width="320" height="240" :data-node="get_url(item.cover_img)"></video>
									<!-- <el-avatar :size="30" shape="square"
										:src="'http://pm.ab0769.com/'+item.cover_img">
									</el-avatar> --> 
								
								</td>
								<!-- <td>
									{{item.views_number}}
								</td> -->
								<td>
									{{item.title}}
									<br />
									推荐：播放:{{item.views_number}} 评论:{{item.reply_number}} 分享:{{item.share_number}} 点赞:{{item.likes_number}}
								</td>
								<td style="width: 150px;">{{item.release_time}}</td>
								<td style="width: 100px;">
									
									<span v-if="item.release_status==1">
										已发布
									</span> 
									<span v-else>
										未发布
									</span>
								</td>
								<td style="width: 160px;">
									<el-button v-if="get_rules('头条 编辑记录')" type="primary" size="mini" @click="editHandle(item.id)">编辑</el-button>
									<el-button v-if="get_rules('头条 删除记录')" type="danger" size="mini"  @click="delHandle(item.id)">删除</el-button>
								</td>
							</tr>
						</table>

						<!-- 分页 -->
						<div class="custom-pagination">
							<el-pagination background layout="prev, pager, next,sizes" :total="total"
								@current-change="pageChange" @size-change="handleSizeChange" :page-size="pagesize"
								:page-sizes="[10, 20, 50, 100]">
							</el-pagination>
						</div>
					</el-card>
				</div>
			</el-tab-pane>
		</el-tabs>

		<!-- 弹窗 -->
		<edit-statistical v-if="activeName === 'dy' && showModal" ref="myModal" @refreshDataList="loadData">
		</edit-statistical>
		<edit-statistical2 v-if="activeName === 'tt' && showModal" ref="myModal" @refreshDataList="loadData">
		</edit-statistical2>
	</div>
</template>
<script>
	import EditStatistical from './components/EditStatistical.vue';
	import EditStatistical2 from './components/EditStatistical2.vue';
	export default {
		components: {
			EditStatistical,
			EditStatistical2
		},
		data() {
			return {
				publishing_platform_s:1,
				page: 1, // 当前页码
				pagesize: 10, // 当前条数
				total: 0, // 总条数
				showModal: false, // 显示弹窗
				activeName: 'dy', // 当前选的是哪个tab选项卡  dy OR tt
				value1: '',
				data_list:[],
				data_statistics:{},
				from:{
					publishing_platform_s:1,
					time:'',
					title:'',
					release_status:'',
					page:1,
					limit:this.pagesize
				},
				value: '',
				accountlist: [{
					value: '',
					label: '全部'
				},{
					value: '0',
					label: '未发布'
				}, {
					value: '1',
					label: '已发布'
				}],
				clickTime: null,
			}
		},
		mounted() {
			this.loadData();
			this.get_data_statistics();
		},
		methods: {
			get_url(fileUrl){
				var f='http://pm.ab0769.com/'+fileUrl
				console.log(f)
				return f;
			},
			is_vido(fileUrl){
				/* let fileUrl = 'https://www.df81.com/abc.jpg'; */
				
				// 取出文件后缀名
				let suffixArr = fileUrl.split('.');
				let fileSuffix = suffixArr[suffixArr.length - 1];
				
				const imgList = ['png', 'jpg', 'jpeg', 'bmp', 'gif'];
				if(imgList.indexOf(fileSuffix) > -1){
				    return 'img';	
				}else{
				   const videoList = ['mp4', 'rmvb', 'avi', 'flv', 'm2v', 'mkv', 'wmv', 'mp3', 'wav'];
				   if(videoList.indexOf(fileSuffix) > -1){
					   
				      return 'viod';
				   }else{
					   return 'no'
				   }
				}
				
				
			},
			loadData() { 
				this.showModal=false;
					this.$http.post("Contentstatistics/lists",this.from).then(res=>{
						this.total=res.data.total;
						this.data_list=res.data.records;
					});
			},
			excels(){
				this.$http.post("Contentstatistics/excels",this.from).then(res=>{
						window.location.href=res.data
				});
			},
			get_data_statistics(){
				this.$http.post("Contentstatistics/data_statistics",this.from).then(res=>{
						this.data_statistics=res.data
				});
			},
			info(){
				
			},
			delHandle(id) {
			    
			    this.$confirm('确认删除已选记录, 是否继续?', '提示', {
			        confirmButtonText: '确定',
			        cancelButtonText: '取消',
			        type: 'warning'
			    }).then(() => {
			        var ids=[];
			        
			        ids.push(id)
			        this.axios.post('Contentstatistics/del', {id:ids}).then(response => {
			            if (response.code === 1) {
			                this.$message({
			                    type: 'success',
			                    message: '删除成功'
			                })
			                this.page = 1;
			                this.search();
			            } else {
			                this.$message({
			                    type: 'error',
			                    message: response.msg
			                })
			            }
			        })
			    }).catch(() => {
			        console.log('取消退出');
			    });
			    
			},
			handleClick(e) {
					var  publishing_platform_s=e.index
					publishing_platform_s++;
					this.from.publishing_platform_s=publishing_platform_s;
					
					this.loadData();
					this.get_data_statistics();
			},
			search(){
				this.from.page=1;
				this.loadData();
				this.get_data_statistics();
			},
			/* selectTime(type) {
				this.clickTime = this.clickTime === type ? null : type;
			}, */
			editHandle(id) {
				
				 this.showModal = true;
				this.$nextTick(() => {
					this.$refs.myModal.init(id);
				}) 
			},
			pageChange(page) {
				this.from.page= page;
				this.loadData();
			},
			handleSizeChange(size) {
				this.from.page=1;
				this.from.limit = size;
				this.loadData();
			}
		}
	}
</script>
<style lang="scss">
	.statistical {
		.statistical-top {

			.item {
				width: 20%;
				height: 55px;

				.number {
					font-size: 20px;
					color: royalblue;
					font-weight: bold;
				}

				.name {
					color: #313033;
					font-size: 14px;
				}
			}
		}

		.search-box {
			padding-top: 10px;

			.item {
				margin-right: 15px;
				margin-bottom: 10px;
				line-height: 44px;
			}

			.time {
				padding: 0 8px;
				cursor: pointer;
				font-size: 12px;
			}

			.active {
				color: royalblue;
				background-color: royalblue;
				color: #FFF;
				height: 20px;
				line-height: 20px;
				border-radius: 4px;
				margin-top: 10px;
			}
		}
	}
</style>
